/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import { Form, Input, Radio, Select, Switch, Button, Tooltip, Icon } from 'antd';
import request from '@/utils/request';
import { connect } from 'dva';
import styles from '../../layouts/password.less';
const FormItem = Form.Item;
const { TextArea } = Input;

const RadioGroup = Radio.Group;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      all_roles:[],
      all_branches:[],
      level:0,
    };
  }
  componentDidMount() {
    const that=this;
    request(`/all_roles`, {
      method: 'GET',
    }).then((response)=> {
      console.log('all_permissions', response)
      if(response.status===200){
        that.setState({
          all_roles:response.data.data
        })
      }
    })
    return
    request(`/all_branches`, {
      method: 'GET',
    }).then((response)=> {
      console.log('all_all_branches', response)
      if(response.status===200){
        that.setState({
          all_branches:response.data.data
        })
      }
    })
  }
  changePassword=(e)=> {
    let value=e.target.value
    let level = 0;
    //正则表达式验证符合要求的
    if(/\d/.test(value)) level++; //数字
    if(/[A-Z]/.test(value)) level++; //小写
    if(/[a-z]/.test(value)) level++; //特殊字符
    if(value.length < 8||value.length > 16)  level=0;
    //逻辑处理
    this.setState({
      level:level
    })
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 7},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15},
      }
    };
    let branch_id=sessionStorage.getItem('branch_id');
    const {getFieldDecorator} = this.props.form;
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
                账号名称
            </span>
            )}
          >
            {getFieldDecorator('username', {
              initialValue: this.props.editRecord ? this.props.editRecord.username : '',
              rules: [{ required: true, message: '请输入名称' }],
            })(
              <Input />
            )}
          </FormItem>
          {
            !this.props.editRecord &&
            <FormItem
              {...formItemLayoutWithLabel}
              label={
                <span>密码 </span>
              }
            >
              {getFieldDecorator('password', {
                initialValue: this.props.editRecord ? this.props.editRecord.password : '',
                rules: [{ required: true, message: '请输入初始密码' }],
              })(
                <Input.Password  onChange={this.changePassword}/>
              )}
            </FormItem>
          }
          {/* {
            !this.props.editRecord &&<FormItem
              label="密码强度(必须为强)"
              {...formItemLayoutWithLabel}
            >
              <div className={styles.strength_box}>
                <div className={styles.one} style={{background:this.state.level>=1?'#F5222D':'#cccccc'}}>
                  <span></span>
                  <p>弱</p>
                </div>
                <div className={styles.two} style={{background:this.state.level>=2?'#FAAD14':'#cccccc'}}>
                  <span></span>
                  <p>中</p>
                </div>
                <div className={styles.three} style={{background:this.state.level>=3?'#52C41A':'#cccccc'}}>
                  <span></span>
                  <p>强</p>
                </div>
              </div>
            </FormItem>
          } */}
         {/*  {
            !branch_id&&
            <FormItem
              {...formItemLayoutWithLabel}
              label={(
                <span>
              所属网点
            </span>
              )}>
              {getFieldDecorator('branch_id', {
                initialValue: this.props.editRecord?this.props.editRecord.branch_id:"",
                rules: [{required: true, message:'角色不能为空'}],
              })(
                <Select  disabled={this.props.editRecord}>
                  <Option  value={''}>全部网点</Option>
                  { this.state.all_branches.map((item, key) => {
                    return (
                      <Option key={item.id}  value={item.id.toString()}>{item.name}</Option>
                    )
                  }) }
                </Select>
              )}
            </FormItem>
          } */}
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
              所属角色
            </span>
            )}>
            {getFieldDecorator('role_id', {
              initialValue: this.props.editRecord?this.props.editRecord.role_id:"",
              rules: [{required: true, message:'角色不能为空'}],
            })(
              <Select  >
                { this.state.all_roles.map((item, key) => {
                  return (
                    <Option key={item.id}  value={item.id.toString()}>{item.name}</Option>
                  )
                }) }
              </Select>
            )}
          </FormItem>

          {/*
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
              巡检员
            </span>
            )}>
            {getFieldDecorator('inspector', {
              initialValue: this.props.editRecord?this.props.editRecord.inspector.toString():"-1",
            })(
              <Select  >
                { [{name:'是',id:'1'},{name:'否',id:'-1'}].map((item, key) => {
                  return (
                    <Option  style={{color:item.id==='1'?'green':'red'}} key={item.id}  value={item.id.toString()}>{item.name}</Option>
                  )
                }) }
              </Select>
            )}
          </FormItem>

          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
              仓库管理员
            </span>
            )}>
            {getFieldDecorator('warehouser', {
              initialValue: this.props.editRecord?this.props.editRecord.warehouser.toString():"-1",
            })(
              <Select  >
                { [{name:'是',id:'1'},{name:'否',id:'-1'}].map((item, key) => {
                  return (
                    <Option  style={{color:item.id==='1'?'green':'red'}} key={item.id}  value={item.id.toString()}>{item.name}</Option>
                  )
                }) }
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
              水表安装员
            </span>
            )}>
            {getFieldDecorator('meter_installer', {
              initialValue: this.props.editRecord?this.props.editRecord.meter_installer.toString():"-1",
            })(
              <Select  >
                { [{name:'是',id:'1'},{name:'否',id:'-1'}].map((item, key) => {
                  return (
                    <Option  style={{color:item.id==='1'?'green':'red'}} key={item.id}  value={item.id.toString()}>{item.name}</Option>
                  )
                }) }
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
              党员
            </span>
            )}>
            {getFieldDecorator('party_member', {
              initialValue: this.props.editRecord?this.props.editRecord.party_member.toString():"-1",
            })(
              <Select  >
                { [{name:'是',id:'1'},{name:'否',id:'-1'}].map((item, key) => {
                  return (
                    <Option  style={{color:item.id==='1'?'green':'red'}} key={item.id}  value={item.id.toString()}>{item.name}</Option>
                  )
                }) }
              </Select>
            )}
          </FormItem>*/}

        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


